<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>角色权限</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="/favicon.ico">
		<link rel="stylesheet" href="/js/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_1911813_s7m2ktfo.css"  media="all"/>
		<link rel="stylesheet" href="/css/public.css" media="all" />
		<link rel="stylesheet" href="/css/system.css" />
	</head>
	<body class="tabMain">
		<div class="layui-row" id="powers">
		    <div class="layui-col-xs2">
		        <div class="layui-card">
			        <div class="layui-card-header cardTitle">角色名称</div>
			        <div class="layui-card-body padding0" id="roleList">
			           <ul class="table" lay-filter="demo" style="width: 100%;">
			           	<template v-for="(item,index) in rolelist">
			           		<li class="tableli" :class="selectRoleId==item.id?'li-active':''" @click="changeRole(item.id)">
							    <a href="javascript:;">{{item.name}}</a>
							  </li>
			           	</template>
						</ul>
			        </div>
			    </div>
		    </div>
		    <div class="layui-col-xs10">
		      <div class="grid-demo tabMain magt0">
		      	<form class="layui-form" action="" lay-filter="powers">
		      		<div class="layui-row">
						<div class="search_text float-r ">
							<i class="iconfont gkb-sousuo"></i>
							<input type="text" placeholder="请输入分组名称" maxlength="10" v-model="search" />
						</div>
			    		<button type="button" class="layui-btn layui-btn-normal" id="btn_selectAll" @click="changeCheckboxChecked(true)">
			    			<i class="iconfont gkb-quanxuan"></i>
					    	全部选中
			    		</button>
			    		<button type="button" class="layui-btn layui-btn-danger" id="btn_cancle" @click="changeCheckboxChecked(false)">
			    			<i class="iconfont gkb-liebiao"></i>
					    	全部取消
			    		</button>
						<button type="button" class="layui-btn" id="btn_save" @click="savePowers">
							<i class="iconfont gkb-baocun"></i>
							保存设置
						</button>
					</div>
					<table class="layui-table" lay-even="" lay-skin="row">
					    <colgroup>
						    <col width="150"  align="center">
						    <col>
					    </colgroup>
					    <thead>
						    <tr>
						        <th class="layui-center">分组名称</th>
						        <th>权限列表</th>
						    </tr> 
					    </thead>
					    <tbody>
					    	<template v-for="(roleItem,roleIndex) in powersShowList" >
					    		<tr>
					    			<td class="layui-center">{{roleItem.page}}</td>
					    			<td>
					    				<template v-for="(powerItem,powerIndex) in roleItem.powers">
					    					<div class="layui-unselect layui-form-checkbox" :class="powerItem.checked?'layui-form-checked':''" @click="changeItemCheck(roleIndex,powerIndex)" lay-skin="primary">
					    						<span>{{powerItem.description}}</span>
					    						<i class="layui-icon layui-icon-ok"></i>
					    					</div>	
					    				</template>
					    			</td>
					    		</tr>
					    	</template>
					    
					  </tbody>
					</table>  
		      	
				</form>
		      </div>
		    </div>
		</div>
	</body>
	<script type="text/javascript" src="/js/jquery-3.5.1.js" ></script>
	<script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
	<script type="text/javascript" src="/js/plugins/vue/vue.js"></script>
	<script type="text/javascript" src="/js/common.js"></script>
	<script type="text/javascript" src="/js/service.js"></script>
	<script type="text/javascript" src="/js/system/role/rolePowers.js"></script>
</html>
